<script  lang="ts" setup name="Person">
//  ref =====> 可以定义：基本类型、对象类型的响应式数据
//  reactive > 只能定义：对象类型的响应式数据
import {reactive,ref} from "vue";
let car = ref({name:'奔驰',price:100})
let games = reactive([
  {id:1,name:'王者荣耀'},
  {id:2,name:'原神'},
  {id:3,name:'CSGO'},
])

function changePrice  (){
  car.value.price += 10
}
function changeGames (){
  games[2].name = 'CSGO2'
}


</script>

<template>
  <div class="prisonBox">
    <div>汽车的信息：汽车的名字{{car.name}}，汽车的价格{{car.price}}万</div>
    <button @click="changePrice">修改汽车的价格</button>
    <hr>
    <ul>
      游戏列表
      <li v-for="item in games" :key="item.id">名称：{{item.name}}</li>
    </ul>
    <button @click="changeGames">修改游戏</button>

  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>